<template>
  <div class="main">
    <div class="header">
      <topheader>
        <template v-slot:nameCN>模型管理模型管理模型管理</template>
        <template v-slot:nameEN>Model management</template>
        <template v-slot:centerContent>
          <div class="menu">
            <div
              v-for="(item, index) in topNavList"
              :class="['item', $store.state.activeNavIndex === index && 'act']"
              :key="index"
              @click="changeNavFn(index)"
            >
              <div
                class="icon"
                :style="{ backgroundImage: `url(${item.imgUrl})` }"
              ></div>
              <div class="title">{{ item.name }}</div>
            </div>
          </div>
        </template>
        <template v-slot:search>
          <div class="search-wrap">
            <input
              type="text"
              placeholder="请输入搜索内容"
              class="serach"
              v-model="searchVal"
              @keyup.enter="searchAfterFn()"
            />
            <div class="icon"></div>
          </div>
        </template>
      </topheader>
    </div>
    <div class="content">
      <div
        class="content-default-main"
        v-show="$store.state.activeNavIndex === 0"
      >
        <!-- 知识模型盒子 -->
        <div
          :class="['content-default-wrap']"
          v-if="zhishiOBJ.list && zhishiOBJ.list.length > 0"
        >
          <defaultdiv
            :dataList="zhishiOBJ.list"
            :swiperObj="swiperObj1"
            @changeListItemFn="editZhishiListFn"
            :fixedIndex="fixedIndex === 0"
          >
            <template v-slot:icon>
              <div
                class="icon"
                :style="{ backgroundImage: `url(${zhishiOBJ.commonIcon})` }"
              ></div>
            </template>
            <template v-slot:name>知识模型</template>
            <template v-slot:scrollbar>
              <div class="swiper-scrollbar swiper-scrollbar1"></div>
            </template>
          </defaultdiv>
        </div>
        <!-- 智能模型盒子 -->
        <div
          class="content-default-wrap"
          v-if="zhinengOBJ.list && zhinengOBJ.list.length > 0"
        >
          <defaultdiv
            :dataList="zhinengOBJ.list"
            :swiperObj="swiperObj2"
            @changeListItemFn="editZhinengListFn"
            :fixedIndex="fixedIndex === 1"
          >
            <template v-slot:icon>
              <div
                class="icon"
                :style="{ backgroundImage: `url(${zhinengOBJ.commonIcon})` }"
              ></div>
            </template>
            <template v-slot:name>智能模型</template>
            <template v-slot:scrollbar>
              <div class="swiper-scrollbar swiper-scrollbar2"></div>
            </template>
          </defaultdiv>
        </div>
        <!-- 业务模型盒子 -->
        <div
          class="content-default-wrap"
          v-if="yewuList && yewuList.length > 0"
        >
          <defaultdiv
            :dataList="yewuList"
            :swiperObj="swiperObj3"
            @changeListItemFn="editYewuListFn"
            :fixedIndex="fixedIndex === 2"
          >
            <template v-slot:icon>
              <div
                class="icon"
                :style="{ backgroundImage: `url(${yewuOBJ.commonIcon})` }"
              ></div>
            </template>
            <template v-slot:name>业务模型</template>
            <template v-slot:scrollbar>
              <div class="swiper-scrollbar swiper-scrollbar3"></div>
            </template>
          </defaultdiv>
        </div>
        <!-- 分析模型盒子 -->
        <div
          class="content-default-wrap"
          v-if="fenxiList && fenxiList.length > 0"
        >
          <defaultdiv
            :dataList="fenxiList"
            :swiperObj="swiperObj4"
            @changeListItemFn="editFenxiListFn"
            :fixedIndex="fixedIndex === 3"
          >
            <template v-slot:icon>
              <div
                class="icon"
                :style="{ backgroundImage: `url(${fenxiOBJ.commonIcon})` }"
              ></div>
            </template>
            <template v-slot:name>分析服务</template>
            <template v-slot:scrollbar>
              <div class="swiper-scrollbar swiper-scrollbar4"></div>
            </template>
          </defaultdiv>
        </div>
      </div>
      <div
        class="content-rank-main"
        id="rankDIV"
        v-show="$store.state.activeNavIndex === 1"
      >
        <div class="content-rank-wrap">
          <ranklist
            class="content-rank"
            :dataList="downloadList"
            :showType="'download'"
          >
            <template v-slot:title_CN>下载排行</template>
            <template v-slot:title_EN>Download ranking</template>
            <template v-slot:icon>
              <div
                class="icon"
                :style="{ backgroundImage: `url(${downloadImgUrl})` }"
              ></div>
            </template>
          </ranklist>
        </div>
        <div class="content-rank-wrap">
          <ranklist
            class="content-rank"
            :dataList="goodList"
            :showType="'good'"
          >
            <template v-slot:title_CN>好评排行</template>
            <template v-slot:title_EN>Top Rated</template>
            <template v-slot:icon>
              <div
                class="icon"
                :style="{ backgroundImage: `url(${goodImgUrl})` }"
              ></div></template
          ></ranklist>
        </div>
        <div class="content-rank-wrap">
          <ranklist class="content-rank" :dataList="hotList" :showType="'hot'"
            ><template v-slot:title_CN>人气排行</template>
            <template v-slot:title_EN>Popularity ranking</template>
            <template v-slot:icon>
              <div
                class="icon"
                :style="{ backgroundImage: `url(${hotImgUrl})` }"
              ></div></template
          ></ranklist>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import topheader from '../../components/tophearder'
import defaultdiv from './components/defaultdiv'
import ranklist from './components/ranklist'

export default {
  data() {
    return {
      showList: [],
      clickNavIndex: 1,
      downloadImgUrl: require('../../assets/images/management-download.png'),
      goodImgUrl: require('../../assets/images/management-good.png'),
      hotImgUrl: require('../../assets/images/management-hot.png'),
      topNavList: [
        {
          id: 1,
          name: 'WX模型',
          imgUrl: require('../../assets/images/topheader-default.png'),
        },
        {
          id: 2,
          name: '排行榜',
          imgUrl: require('../../assets/images/topheader-rank.png'),
        },
      ],
      swiperObj1: {
        slidesPerView: 5,
        spaceBetween: 10,
        scrollbar: {
          el: '.swiper-scrollbar1',
          draggable: true,
        },
        slideToClickedSlide: true,
      },
      swiperObj2: {
        slidesPerView: 5,
        spaceBetween: 10,
        scrollbar: {
          el: '.swiper-scrollbar2',
          draggable: true,
        },
        slideToClickedSlide: true,
      },
      swiperObj3: {
        slidesPerView: 5,
        spaceBetween: 10,
        scrollbar: {
          el: '.swiper-scrollbar3',
          draggable: true,
        },
        slideToClickedSlide: true,
      },
      swiperObj4: {
        slidesPerView: 5,
        spaceBetween: 10,
        scrollbar: {
          el: '.swiper-scrollbar4',
          draggable: true,
        },
        slideToClickedSlide: true,
      },
      downloadList: [],
      goodList: [],
      hotList: [],
      searchVal: '',
      zhishiOBJ: {},
      zhinengOBJ: {},
      yewuOBJ: {},
      yewuList: [],
      fenxiOBJ: {},
      fenxiList: [],
      fixedIndex: null,
    }
  },
  components: {
    topheader,
    defaultdiv,
    ranklist,
  },
  mounted() {
    this.downloadList = this.sortArr('download')
    this.goodList = this.sortArr('rank')
    this.hotList = this.sortArr('hot')
    this.initDefaultListsFn()
  },
  methods: {
    onGoLinkFn(item) {
      this.$store.commit('changeShowItemObj', item)
      this.$router.push({ name: 'integrated' })
    },
    changeNavFn(index) {
      this.$store.commit('changeActiveNavIndex', index)
    },
    // 初始化默认的4项list
    initDefaultListsFn() {
      let allArr = JSON.parse(JSON.stringify(this.$store.state.dataList))
      this.zhishiOBJ = allArr[0]
      this.zhinengOBJ = allArr[1]
      this.yewuOBJ = allArr[2]
      this.fenxiOBJ = allArr[3]
      let yewuList = []
      let fenxiList = []
      this.yewuOBJ.list.forEach((item) => {
        item.sonlist.forEach((item2) => {
          yewuList.push(item2)
        })
      })
      this.yewuList = yewuList
      this.fenxiOBJ.list.forEach((item) => {
        item.sonlist.forEach((item2) => {
          fenxiList.push(item2)
        })
      })
      this.fenxiList = fenxiList
    },
    // 修改zhishilist
    editZhishiListFn(index) {
      this.initDefaultListsFn()
      this.zhishiOBJ.list[index].click = 'true'
      this.fixedIndex = 0
    },
    // 修改zhinenglist
    editZhinengListFn(index) {
      this.initDefaultListsFn()
      this.zhinengOBJ.list[index].click = 'true'
      this.fixedIndex = 1
    },
    // 修改yewulist
    editYewuListFn(index) {
      this.initDefaultListsFn()
      this.yewuList[index].click = 'true'
      this.fixedIndex = 2
    },
    // 修改zhishilist
    editFenxiListFn(index) {
      this.initDefaultListsFn()
      this.fenxiList[index].click = 'true'
      this.fixedIndex = 3
    },
    // 排序排行榜单的数组
    sortArr(type) {
      let arr = JSON.parse(JSON.stringify(this.$store.state.dataList))
      let newArr = []
      // 合并多维对象数组
      arr.forEach((item1) => {
        item1.list.forEach((item2) => {
          if (item2.sonlist) {
            item2.sonlist.forEach((item3) => {
              newArr.push(item3)
            })
          } else {
            newArr.push(item2)
          }
        })
      })
      // 进行排序
      newArr.sort((a, b) => {
        return b[type] - a[type]
      })
      return newArr
    },
    // 搜索结果高亮
    searchAfterFn() {
      // 展示模型筛选
      if (this.$store.state.activeNavIndex === 0) {
        this.filterArrFn()
      } else if (this.$store.state.activeNavIndex === 1) {
        // 排行榜的高亮展示
        this.$nextTick(() => {
          let doms = document.querySelectorAll('.name')
          let reg = new RegExp(this.searchVal, 'ig')
          for (let index = 0; index < doms.length; index++) {
            let content = doms[index].textContent
            doms[index].innerHTML = content.replace(reg, ($0) => {
              return `<strong style='color: #ff0000'>${$0}</strong>`
            })
          }
        })
      }
    },
    // 过滤默认展示的数组
    filterArrFn() {
      this.initDefaultListsFn()
      let zhishiArr = this.zhishiOBJ.list.filter((item) => {
        return item.name.indexOf(this.searchVal) >= 0
      })
      let zhinengArr = this.zhinengOBJ.list.filter((item) => {
        return item.name.indexOf(this.searchVal) >= 0
      })
      let yewuArr = this.yewuList.filter((item) => {
        return item.name.indexOf(this.searchVal) >= 0
      })
      let fenxiArr = this.fenxiList.filter((item) => {
        return item.name.indexOf(this.searchVal) >= 0
      })
      this.zhishiOBJ.list = zhishiArr
      this.zhinengOBJ.list = zhinengArr
      this.yewuList = yewuArr
      this.fenxiList = fenxiArr
    },
  },
}
</script>
<style scoped lang="scss">
.main {
  flex: 0 0 100%;
  width: 100%;
  background-color: #f3f5fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  .header {
    width: 100%;
    flex: 0 0 60px;
    height: 60px;
    .menu {
      width: 240px;
      height: 100%;
      display: flex;
      align-items: center;
      .item {
        flex: 1 1 auto;
        width: 120px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .icon {
          width: 24px;
          height: 24px;
          margin-right: 10px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
        }
        &:first-child {
          .icon {
            background-image: url('../../assets/images/skin3-shuju.png');
          }
        }
        &:nth-child(2) {
          .icon {
            background-image: url('');
          }
        }
        &:hover,
        &.act {
          background: rgba(44, 252, 254, 0.2);
        }
        .title {
          color: #fff;
          font-weight: 600;
          font-size: 16px;
        }
      }
    }
  }
  .content {
    width: 100%;
    padding: 25px;
    flex: 1 1 auto;
    box-sizing: border-box;
    background-color: #04334b;
    .content-default-main {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // vodal渗透位置选择
      .content-default-wrap {
        margin-top: 16px;
        &:first-child {
          margin-top: 0;
        }
        &:first-child {
          /deep/ .item-wrap {
            .vodal-wrapper {
              top: -50px;
            }
          }
        }
        &:nth-child(2) {
          /deep/ .item-wrap {
            .vodal-wrapper {
              top: -200px;
            }
          }
        }
        &:nth-child(3) {
          /deep/ .item-wrap {
            .vodal-wrapper {
              bottom: -150px;
            }
          }
        }
        &:nth-child(4) {
          /deep/ .item-wrap {
            .vodal-wrapper {
              bottom: 50px;
            }
          }
        }
      }
    }
    .content-rank-main {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .content-rank-wrap {
        width: 32%;
        height: 100%;
      }
    }
  }
}
</style>
